<template>
  <view class="card trending-card" :class="{ 'cold-match': true, 'completed-match': match.is_finished }">
    <!-- 冷门标记 -->
    <view class="trending-badge">冷门</view>
    
    <!-- 卡片头部 -->
    <view class="card-header">
      <view>
        <view class="card-title">
          {{ match.league }}
          <text class="cold-tag" v-if="!match.is_finished">爆冷预警</text>
        </view>
        <view class="card-subtitle" v-if="match.round">{{ match.round }}</view>
      </view>
      <view class="match-status" v-if="match.is_finished">已结束</view>
    </view>
    
    <!-- 比赛球队 -->
    <view class="match-teams">
      <view class="team">
        <view class="team-logo">{{ getTeamShortName(match.home_team) }}</view>
        <view class="team-name">{{ match.home_team }}</view>
      </view>
      <view class="match-vs">VS</view>
      <view class="team">
        <view class="team-logo">{{ getTeamShortName(match.away_team) }}</view>
        <view class="team-name">{{ match.away_team }}</view>
      </view>
    </view>
    
    <!-- 比分（仅完成的比赛显示） -->
    <view class="match-score" v-if="match.is_finished">
      {{ match.home_score }} - {{ match.away_score }}
    </view>
    
    <!-- 比赛时间和地点 -->
    <view class="match-time">
      {{ formatDateTime(match.match_time) }} · {{ match.stadium || '未知球场' }}
    </view>
    
    <!-- 预测统计（仅未完成比赛显示） -->
    <view class="stats" v-if="!match.is_finished">
      <view class="stat-item">
        <view class="stat-value">{{ match.home_win_rate || 0 }}%</view>
        <view class="stat-label">主胜预测</view>
      </view>
      <view class="stat-item">
        <view class="stat-value">{{ match.draw_rate || 0 }}%</view>
        <view class="stat-label">平局预测</view>
      </view>
      <view class="stat-item">
        <view class="stat-value">{{ match.away_win_rate || 0 }}%</view>
        <view class="stat-label">客胜预测</view>
      </view>
    </view>
    
    <!-- 进度条 -->
    <view class="progress-bar" v-if="!match.is_finished">
      <view class="progress-fill" :style="{ width: (match.home_win_rate || 0) + '%' }"></view>
    </view>
    
    <!-- 冷门分析 -->
    <view class="analysis" v-if="!match.is_finished && match.cold_analysis">
      <view class="analysis-header">
        <view class="analysis-icon">
          <text class="icon">!</text>
        </view>
        <text class="analysis-title">冷门分析</text>
      </view>
      <text class="analysis-content">{{ match.cold_analysis }}</text>
    </view>
    
    <!-- 预测结果（仅完成的比赛显示） -->
    <view 
      class="prediction-result" 
      v-if="match.is_finished"
    >
      <text 
        :class="[
          'result-tag', 
          match.prediction_correct ? 'correct-tag' : 'wrong-tag'
        ]"
      >
        {{ match.prediction_correct ? '预测正确' : '预测错误' }}
      </text>
    </view>
    
    <!-- 显示实际预测值 -->
    <view class="user-prediction" v-if="match.is_finished && match.prediction_result">
      <text class="prediction-label">推荐</text>
      <view class="prediction-badge">
        <text class="prediction-value">{{ match.prediction_result }}</text>
      </view>
    </view>
    
    <!-- 赛果分析（已完成的比赛） -->
    <view class="analysis result-analysis" v-if="match.is_finished && match.result_analysis">
      <view class="analysis-header">
        <view class="analysis-icon result-icon">
          <text class="icon">i</text>
        </view>
        <text class="analysis-title">赛果分析</text>
      </view>
      <text class="analysis-content">{{ match.result_analysis }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    match: {
      type: Object,
      required: true
    }
  },
  methods: {
    // 获取球队简称
    getTeamShortName(teamName) {
      if (!teamName) return '';
      return teamName.substring(0, 3).toUpperCase();
    },
    
    // 格式化日期时间
    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return '';
      
      try {
        const date = new Date(dateTimeStr);
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hours = date.getHours();
        const minutes = String(date.getMinutes()).padStart(2, '0');
        
        return `${month}月${day}日 ${hours}:${minutes}`;
      } catch (e) {
        console.error('日期格式化错误:', e);
        return dateTimeStr;
      }
    }
  }
}
</script>

<style lang="scss">
.trending-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  
  &:active {
    transform: scale(0.98);
  }
  
  &.cold-match {
    border-left: 8rpx solid $danger;
  }
  
  &.completed-match {
    opacity: 0.88;
  }
}

.trending-badge {
  position: absolute;
  top: 30rpx;
  right: -60rpx;
  background: linear-gradient(135deg, $danger 0%, darken($danger, 10%) 100%);
  color: $light;
  padding: 8rpx 60rpx;
  transform: rotate(45deg);
  font-size: $font-size-xs;
  font-weight: bold;
  z-index: 1;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  letter-spacing: 2rpx;
}

.cold-tag {
  display: inline-block;
  background: linear-gradient(135deg, $danger 0%, darken($danger, 5%) 100%);
  color: $light;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  font-size: $font-size-xs;
  font-weight: bold;
  margin-left: $spacing-sm;
  vertical-align: middle;
  box-shadow: 0 2rpx 8rpx rgba(239, 71, 111, 0.2);
  letter-spacing: 1rpx;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: $spacing-base;
  position: relative;
  padding-bottom: $spacing-xs;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: $font-size-lg;
  font-weight: 700;
  color: $text-color;
  letter-spacing: 0.5rpx;
}

.card-subtitle {
  font-size: $font-size-sm;
  color: $text-color-secondary;
  margin-top: 4rpx;
}

.match-status {
  font-size: $font-size-xs;
  background-color: $gray;
  color: $light;
  padding: 4rpx 16rpx;
  border-radius: 30rpx;
  font-weight: 500;
  letter-spacing: 1rpx;
}

.match-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-base;
  padding: 0 $spacing-sm;
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 35%;
}

.team-logo {
  width: 94rpx;
  height: 94rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f7fa 0%, #e6e9f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacing-xs;
  font-size: $font-size-lg;
  font-weight: 700;
  color: $danger;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.team-name {
  font-size: $font-size-sm;
  text-align: center;
  font-weight: 500;
  margin-top: 8rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 72rpx;
}

.match-vs {
  font-weight: 800;
  color: $text-color-secondary;
  font-size: 28rpx;
  position: relative;
  z-index: 1;
  
  &::before {
    content: '';
    position: absolute;
    width: 50rpx;
    height: 50rpx;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 50%;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.match-score {
  font-size: $font-size-xl;
  font-weight: bold;
  text-align: center;
  margin-bottom: $spacing-base;
  padding: $spacing-xs 0;
  background-color: rgba(0, 0, 0, 0.02);
  color: $danger;
  letter-spacing: 2rpx;
}

.match-time {
  font-size: $font-size-xs;
  color: $text-color-secondary;
  text-align: center;
  margin-bottom: $spacing-base;
  padding: 0 $spacing-base;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &::before, &::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.05);
    margin: 0 16rpx;
  }
}

.stats {
  display: flex;
  justify-content: space-between;
  margin-top: $spacing-base;
  padding: 0 $spacing-sm;
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 8rpx;
  padding: 16rpx;
  margin: $spacing-base $spacing-sm;
}

.stat-item {
  text-align: center;
  position: relative;
  
  &:not(:last-child):after {
    content: '';
    position: absolute;
    right: -10rpx;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.05);
  }
}

.stat-value {
  font-size: $font-size-lg;
  font-weight: 700;
  color: $danger;
  margin-bottom: 4rpx;
}

.stat-label {
  font-size: $font-size-xs;
  color: $text-color-secondary;
}

.progress-bar {
  height: 12rpx;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 6rpx;
  margin: 0 $spacing-lg $spacing-base;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, $danger 0%, darken($danger, 10%) 100%);
  border-radius: 6rpx;
  transition: width 0.5s ease;
}

.analysis {
  margin: $spacing-base $spacing-sm;
  font-size: $font-size-sm;
  line-height: 1.6;
  background-color: rgba(239, 71, 111, 0.05);
  padding: 20rpx;
  border-radius: 12rpx;
  border-left: 4rpx solid $danger;
  position: relative;
  
  &.result-analysis {
    background-color: rgba(0, 0, 0, 0.02);
    border-left: 4rpx solid $primary;
    
    .result-icon {
      background: linear-gradient(135deg, $primary 0%, darken($primary, 10%) 100%);
    }
  }
}

.analysis-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.analysis-icon {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, $danger 0%, darken($danger, 10%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(239, 71, 111, 0.2);
  
  .icon {
    color: white;
    font-size: 24rpx;
    font-weight: bold;
    line-height: 1;
  }
}

.analysis-title {
  font-weight: 600;
  color: $text-color;
  font-size: 28rpx;
  letter-spacing: 1rpx;
}

.analysis-content {
  color: $text-color;
  text-align: justify;
  padding-left: 46rpx;
  font-size: 26rpx;
}

.prediction-result {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16rpx 0;
  
  .result-tag {
    padding: 8rpx 24rpx;
    border-radius: 30rpx;
    font-size: 28rpx;
    font-weight: 600;
    letter-spacing: 2rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  .correct-tag {
    background: linear-gradient(135deg, #4CAF50 0%, darken(#4CAF50, 10%) 100%);
    color: #ffffff;
  }
  
  .wrong-tag {
    background: linear-gradient(135deg, #F44336 0%, darken(#F44336, 10%) 100%);
    color: #ffffff;
  }
}

.user-prediction {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20rpx 0;
  
  .prediction-label {
    font-size: 26rpx;
    color: $text-color-secondary;
    margin-right: 12rpx;
    font-weight: 500;
  }
  
  .prediction-badge {
    background: linear-gradient(135deg, rgba($danger, 0.8) 0%, rgba(darken($danger, 10%), 0.9) 100%);
    padding: 6rpx 20rpx;
    border-radius: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(239, 71, 111, 0.12);
    
    .prediction-value {
      font-size: 28rpx;
      color: #ffffff;
      font-weight: 600;
      letter-spacing: 1rpx;
    }
  }
}
</style> 